<template>
  <div>
    <Drag :list="list" id-key="id">
        <template #default="{ item }">
          <a-card :title="'Default size ' + item.title" style="width: 100%;margin-bottom: 10px;">
            <template #extra>
              <DragOutlined style="cursor: pointer;" />
            </template>
            <p>card content</p>
            <p>card content</p>
            <p>card content</p>
          </a-card>
        </template>
    </Drag>
  </div>
</template>

<script setup lang="ts">
import Drag from '@/components/DragSort/Drag.vue';
import { DragOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';

const list = ref([
  {
    id: 1,
    title: 'card1'
  },
  {
    id: 2,
    title: 'card2'
  },
  {
    id: 3,
    title: 'card3'
  }
])

function change(ids: string[]) {
// 
}
</script>